<template>
	<view class="setting-list">
		<view class="row">
			<view class="left">
				<text class="text" style="color: #EA5404;">*</text>
				<text class="text">收货人</text>
			</view>
			<input class="uni-text" type="text" value='name' v-model='name' data-type='name' @input='inputValueChange'
				placeholder="请输入姓名" placeholder-style="color:#ADB0AE" />
		</view>
		<view class="row">
			<view class="left">
				<text class="text" style="color: #EA5404;">*</text>
				<text class="text">手机号</text>
			</view>
			<input class="uni-text" type="number" value='mobile' v-model='mobile' data-type='mobile' maxlength="11"
				@input='inputValueChange' placeholder="请输入手机号" placeholder-style="color:#ADB0AE" />
		</view>
		<view class="row" @click="toArea">
			<view class="left">
				<text class="text" style="color: #EA5404;">*</text>
				<text class="text">所在区域</text>
			</view>
			<view class="left">
				<text class="uni-text">{{area}}</text>
				<image class="arrow"
					src="@appstatic/img/my/my_icon_right_arrow.png">
			</view>
		</view>
		<view class="row" style="height: 100px; 	align-items: flex-start;margin-top: 15px;">
			<view class="left" style="  width: 100px;">
				<text class="text" style="color: #EA5404;">*</text>
				<text class="text">详细地址</text>
			</view>
			<textarea style="height: 100px; " class="uni-text-address" type="text" value='address' v-model='address' data-type='address'
				maxlength="150" @input='inputValueChange' placeholder="请输入详细地址" placeholder-style="color:#ADB0AE" />
		</view>
		<view class="row">
			<view class="left">
				<text class="text" style="color: #00000000;">*</text>
				<text class="text">设为默认地址</text>
			</view>
			<view style="padding-right: 15px;">
				<switch v-if='isDefault==1' checked="" @change="switchChange" color='#EA5404' />
				<switch v-else @change="switchChange" color='#EA5404' />
			</view>
		</view>
		<view class="saveBtn_no" v-if="forbidden==true" @click="save">保存</view>
		<view class="saveBtn" @click="save" v-else>保存</view>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	export default {
		data() {
			return {
				text: '编辑地址',
				uuid: "",
				name: "",
				mobile: "",
				area: "",
				address: "",
				isDefault: 0,
				forbidden: true,
				province: '',
				city: '',
				addressArea:'',
				saveClickable:true
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.isEdit == "true") {
				this.text = '编辑地址'
				this.uuid = options.uuid,
					this.getUsersAddressDetails()
				uni.setNavigationBarTitle({
					title: "编辑地址"
				})


			} else {
				this.text = '添加新地址'
				uni.setNavigationBarTitle({
					title: "添加新地址"
				})
			}

		},
		onShow: function() {



		},
		methods: {
			//输入监听
			inputValueChange(e) {
				let type = e.currentTarget.dataset.type
				let value = e.detail.value
				if (value == '') {
					this.forbidden = true
				} else {
					this.isForbidden()
				}
				if (type == 'mobile') {
					value = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/)[0])
					this.$nextTick(() => {
						this.formData[type] = value
					})
				}
			},
			//是否默认开关
			switchChange: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				if (e.detail.value == true) {
					this.isDefault = 1
				} else {
					this.isDefault = 0
				}
			},
			//保存按钮是否禁止
			isForbidden: function() {
				var that = this;
				if (that.name != '' && that.mobile != '' && that.area != '' && that.address != '') {
					that.forbidden = false
				}
			},
			//保存按钮
			save: function() {
				var that = this;
				if (that.name == '') {
					uni.showToast({
						title: "请输入姓名",
						duration: 3000,
						icon: 'none'
					})
				} else if (that.mobile == '') {
					uni.showToast({
						title: "请输入手机号",
						duration: 3000,
						icon: 'none'
					})
				} else if (that.mobile.length!=11) {
					uni.showToast({
						title: "请输入正确的手机号",
						duration: 3000,
						icon: 'none'
					})
				}else if (that.mobile.substring(0,1)!="1") {
					uni.showToast({
						title: "请输入正确的手机号",
						duration: 3000,
						icon: 'none'
					})
				}else if (that.area == '') {
					uni.showToast({
						title: "请选择所在地区",
						duration: 3000,
						icon: 'none'
					})
				} else if (that.address == '') {
					uni.showToast({
						title: "请输入详细地址",
						duration: 3000,
						icon: 'none'
					})
				}  else if (that.address.length>150) {
					uni.showToast({
						title: "地址最多可填写150字符",
						duration: 3000,
						icon: 'none'
					})
				}else {
					debugger
					if(that.saveClickable==true){
						if (that.text == "添加新地址") {
							that.createUsersAddress()
						} else {
							that.updateUsersAddress()
						}
					}
					
				}
			},
			//新建地址
			createUsersAddress: function() {
				var that = this;
				that.saveClickable=false
				var uri = app.globalData.config.interfaces.URL_ADDRESS_CREATE_USERS_ADDRESS; //刷新页面配置
				var params = {
					userId: app.globalData.userInfo.id,
					addressName: that.name,
					addressPhone: that.mobile,
					addressProvince: that.province,
					addressCity: that.city,
					addressArea:that.addressArea,
					addressDetails: that.address,
					isDefault: this.isDefault
				};
				network.post(uri, params, 'json', null, true).then(res => {
					if (res.code == 200) {
						that.saveClickable=true
						uni.showToast({
							title: "保存成功",
							duration: 3000,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},
			//编辑地址
			updateUsersAddress: function() {
				var that = this;
				that.saveClickable=false
				var uri = app.globalData.config.interfaces.URL_ADDRESS_UPDATE_USERS_ADDRESS;
				var params = {
					uuid: that.uuid,
					userId: app.globalData.userInfo.id,
					addressName: that.name,
					addressPhone: that.mobile,
					addressProvince: that.province,
					addressCity: that.city,
					addressArea:that.addressArea,
					addressDetails: that.address,
					isDefault: this.isDefault
				};
				network.post(uri, params, 'json', null, true).then(res => {
					if (res.code == 200) {
						that.saveClickable=true
						uni.showToast({
							title: "更新成功",
							duration: 3000,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//获取用户地址详细信息
			getUsersAddressDetails: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_ADDRESS_GET_USERS_ADDRESS_DETAILS;
				var params = {
					uuId: this.uuid
				};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						this.name = res.data.addressName
						this.mobile = res.data.addressPhone
						this.area = res.data.addressProvince + " " + res.data.addressCity + " " + res.data.addressArea
						this.province = res.data.addressProvince
						this.city = res.data.addressCity
						this.addressArea = res.data.addressArea
						this.address = res.data.addressDetails
						this.isDefault = res.data.isDefault
						this.isForbidden()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});




			},
			//跳转所在区域
			toArea: function() {
				uni.navigateTo({
					url: "../myArea/myArea",
				});
			}
		}
	}
</script>

<style>
	@import "./editAddress.css";
</style>
